<template>
	<view class="container">

		<view class="uni-padding-wrap">

			<view class="direction">
				<view class="bg-compass-line"></view>
				<image class="bg-compass" src="@/static/compass.png" :style="'transform: rotate('+direction+'deg)'">
				</image>
				<view class="direction-value">
					<text>{{direction}}</text>
					<text class="direction-degree">o</text>
				</view>
			</view>
		</view>
		<view class="location">
			北纬 : {{location.latitude}} &nbsp; &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;&nbsp; 东经 : {{location.longitude}}

		</view>
	</view>
</template>
<script>
	import { permLocation, useLocation } from '@/common/useLocation.js'
	export default {
		data() {
			return {

				direction: 0,
				location: {
					"latitude": 0,
					"longitude": 0
				},
					timer: null,
			}
		},
		onReady: function() {
			uni.onCompassChange((res) => {
				this.direction = parseInt(res.direction)
			})
		},
		onLoad(e){
			permLocation()
			this.timer = setInterval(this.getLocation,5000)
		},
		onUnload() {
			// #ifndef MP-ALIPAY
			uni.stopCompass();
			this.direction = 0;
			
			// #endif

			// #ifdef MP-ALIPAY
			uni.offCompassChange();
			// #endif
		},
		methods: {
			// #ifndef MP-ALIPAY
			getLocation() {
				let that = this
				useLocation().then(res=>{
					that.location = {
						"latitude": res.lng,
						"longitude": res.lat,
					}
				})
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: (res => {
				// 		that.location = {
				// 			"latitude": res.latitude,
				// 			"longitude": res.longitude,
				// 		}
				// 	})
				// })
			}
			// #endif
		},
		onHide() {
			clearInterval(this.timer)
		},
	}
</script>


<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #3f58f0;

		.uni-padding-wrap {
			padding-top: 20%;
			height: 60%;
		}

		.location {
			color: #fff;
			margin: 0 auto;
			with: 100%;
			text-align: center;
			font-size: 40rpx;

		}
	}

	.direction {
		position: relative;
		margin-top: 70rpx;
		display: flex;
		width: 540rpx;
		height: 540rpx;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.direction-value {
		position: relative;
		font-size: 200rpx;
		color: #353535;
		line-height: 1;
		z-index: 1;
	}

	.direction-degree {
		position: absolute;
		top: 0;
		right: -40rpx;
		font-size: 60rpx;
	}

	.bg-compass {
		position: absolute;
		top: 0;
		left: 0;
		width: 540rpx;
		height: 540rpx;
		transition: .1s;
	}

	.bg-compass-line {
		position: absolute;
		left: 267rpx;
		top: -10rpx;
		width: 6rpx;
		height: 56rpx;
		background-color: #1AAD19;
		border-radius: 999rpx;
		z-index: 1;
	}
</style>